<template>
	<view class="message page-main">
		<view class="title">
			<router-link :underline="false" :to="{ path: '/pages/user/index' }"><span class="arrowLeft"></span></router-link>
			<span class="name">{{$t('user.msg')}}</span>
			<span></span>
		</view>
		<view class="messageList">
			<dl v-for="(item,index) in msgList" @click="handleInfo(item)">
				<dt><img src="@/static/images/messageIcon.png" alt="" srcset=""></dt>
				<dd>
					<view class="topInfor">
						<strong class="fl f16">{{item.title}}</strong>
					</view>
					<span class="f12">{{item.content}}</span>
				</dd>
				<dd>
					<em>{{item.createTime}}</em>
				</dd>
			</dl>
		</view>
	</view>
</template>  

<script>
import authMixin from '@/mixins/auth'
import { getToken } from '@/utils/auth'
	export default {
		data() {
			return {
				currentPage: 1,
				pageSize: 10,
				loading: false,
				hasMoreData: true,
				msgList: []
			}
		},
		methods: {
			async getMsgList() {
				let params = {
					token: getToken(),
					page: this.currentPage,
					size: this.pageSize
				}
				const {code, data} = await this.$api.home.getMsgList(params)
				let rows = data.rows
				if(code === 200) {
					if (rows && rows.length > 0) {
						if (this.currentPage === 1) {
							this.msgList = rows;
						} else {
							this.msgList = this.msgList.concat(rows); 
						}
						this.currentPage++;
					} else {
						this.hasMoreData = false;
					}
				}
			},
			loadMore() {
				if (!this.loading && this.hasMoreData) {
					this.getMsgList();
				}else {
					uni.showToast({
						title: 'No More Data',
						icon: 'none'
					});
				}
			},
			handleInfo(item) {
				uni.reLaunch({
					url: `/pages/message/detail?id=${item.id}&type=list`
				})
			}
		},
		mounted() {
			this.getMsgList()
		}
	}
</script>

<style lang="scss" scoped>
.message {
	a{
		text-decoration: none;
		color: #333;
	}
	padding:0 40rpx;
	position: relative;
	height: 100%;
	background:#fff url('@/static/images/set/setbg.png') no-repeat;
	background-size:100%;
	.title{
		width:100%;
		padding:20rpx;
		// display: flex;
		// justify-content: space-between;
		box-sizing: border-box;
		.arrowLeft{
			display: inline-block;
			background:url(@/static/images/user/left.png) no-repeat 0 10rpx;
			width:50rpx;
			height:50rpx;
			background-size:100%;
		}
		.name{
			font: 500 80rpx/60rpx PingFangSC;
			color: #fff;
			padding-top: 200rpx;
			display: block;
		}
	}
	.messageList{
		z-index: 999 ;
		padding:30rpx 0;
		width:100%;
		box-sizing: border-box;
		dl{
			padding:24rpx 0;
			margin-bottom:24rpx;
			box-sizing: border-box;
			width:100%;
			overflow: hidden;
			background: rgba(255,255,255,0.1);
			border-radius: 10rpx;
			dt{
				width:64rpx;
				height:64rpx;
				float:left;
				background: #FFFFFF;
				box-shadow: 0px 4rpx 40rpx 0rpx rgba(109,80,223,0.1);
				border-radius: 40rpx;
				color:#333;
				
				img{
					display: inline-block;
					width:50rpx;
					height:50rpx;
					background-size: 100%;
					margin: 0 4rpx;
					vertical-align: -webkit-baseline-middle;
					padding-top:30rpx;
				}
			}
			dd{
				float: left;
			}
			dd:nth-child(3){
				width:160rpx;
				float:right;
				text-align: right;
				em{
					font-size:24rpx;
					line-height:110rpx;
					color:#999;
				}
			}
			dd:nth-child(2){
				width:400rpx;
				margin-left:40rpx;
				color:#333;
				.topInfor{
					width: 100%;
					overflow: hidden;
					margin-bottom:20rpx;
					strong{
						display: inline-block;
						width:380rpx;
						line-height:40rpx;
						word-break: break-all;
						font-weight: bold;
						color:#333;
					}
				}
				.f12{
					line-height:30rpx;
					color:#666;
				}
			}
			
		}
		
	}
}
</style>
